<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="120px"
    status-icon
    label-position="top"
  >
    <el-form-item label="面试时间：" prop="interviewerTimeSecond">
      <el-date-picker
        v-model="form.interviewerTimeSecond"
        type="date"
        placeholder="请选择"
        style="width: 100%"
      />
    </el-form-item>

    <el-form-item label="面试结果：" prop="interviewerResultSecond">
      <el-radio-group v-model="form.interviewerResultSecond">
        <el-radio :value="0">
          <div class="result">面试通过</div>
        </el-radio>
        <el-radio :value="1">
          <div class="no">暂不考虑</div>
        </el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- <el-form-item label="是否需要下一轮面试：" prop="nextInterview">
      <el-radio-group v-model="form.nextInterview">
        <el-radio label="yes">是</el-radio>
        <el-radio label="no">否</el-radio>
      </el-radio-group>
    </el-form-item> -->

    <el-form-item label="面试内容记录：" prop="secondContent" v-if='form.interviewerResultSecond==0'>
      <el-input
        v-model="form.secondContent"
        type="textarea"
        placeholder="请输入"
        maxlength="300"
        show-word-limit
        rows="4"
      />
    </el-form-item>

    <div style="text-align: right; margin-top: 20px">
      <el-button @click="handleCancel">取消</el-button>
      <el-button @click="handleSave">保存</el-button>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </el-form>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  initialData: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["submit"]);

const formRef = ref(null);
const form = reactive({
  interviewerTimeSecond: "",
  interviewerResultSecond: "0",
  // nextInterview: '0',
  secondContent: "",
});

// 验证规则
const rules = reactive({
  interviewerTimeSecond: [
    { required: true, message: "请选择面试时间", trigger: "change" },
  ],
  interviewerResultSecond: [
    { required: true, message: "请选择面试结果", trigger: "change" },
  ],
  secondContent: [{ max: 300, message: "最多输入300个字符", trigger: "blur" }],
});

// 监听初始数据变化
watch(
  () => props.initialData,
  (newVal) => {
    if (newVal) {
      Object.assign(form, newVal);
    }
  },
  { immediate: true, deep: true }
);

// 提交表单
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emit("submit", { ...form });
      // ElMessage.success("表单提交成功");

    } else {
      ElMessage.error("请填写信息");
      return false;
    }
  });
};

// 保存表单
const handleSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emit("save", { ...form });
    } else {
      ElMessage.error("请填写信息");
      return false;
    }
  });
};

// 取消表单
const handleCancel = () => {
  Object.assign(form, props.initialData);
  emit("cancel");
};
</script>

<style scoped>
.el-form {
  max-width: 600px;
  margin: 10px;
}
</style>
